<template>
  <div v-show="hidden" class="dh_error">
    <div :class="state?'top-left':'ntop-left'"></div>
    <div :class="state?'top-bottom':'ntop-bottom'"></div>
    <div :class="state?'bottom-top':'nbottom-top'"></div>

    <div :class="state?'bottom-right':'nbottom-right'"></div>
  </div>
</template>
<script>
export default {
  name: "dh",
  props: {
    state: { default: false },
    hidden:{
        default: false
    }
  },
};
</script>
<style lang="less" scoped>
@time: 1s;
.dh_error {
  .top-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5px;
    height: 100%;
    background: red;
    animation: hlarg @time;
  }
  .top-left {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0.5px;
    background: red;
    animation: wlarg @time;
  }
  .bottom-right {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5px;
    background: red;
    animation: wlarg @time;
  }
  .bottom-top {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.5px;
    height: 100%;
    background: red;
    animation: hlarg @time;
  }
  @keyframes wlarg {
    from {
      width: 0px;
    }
    to {
      width: 100%;
    }
  }
  @keyframes hlarg {
    from {
      height: 0px;
    }
    to {
      height: 100%;
    }
  }

  .ntop-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5px;
    height: 0px;
    background: red;
    animation: nhlarg @time;
  }
  .ntop-left {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 0.5px;
    background: red;
    animation: nwlarg @time;
  }
  .nbottom-right {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px;
    height: 0.5px;
    background: red;
    animation: nwlarg @time;
  }
  .nbottom-top {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.5px;
    height: 0px;
    background: red;
    animation: nhlarg @time;
  }
  @keyframes nwlarg {
    from {
      width: 100%;
    }
    to {
      width: 0px;
    }
  }
  @keyframes nhlarg {
    from {
      height: 100%;
    }
    to {
      height: 0px;
    }
  }
}
</style>